<template>
  <basic-dialog :visible="show"
                :title="state === 'add' ? '添加工位' : '编辑工位'"
                :isShowInnerLoading="false"
                min-width="400px"
  >
    <q-form @submit="submit" class="q-gutter-md dialog-content">
      <div style="padding: 20px 20px 0">
        <div class="flex font-size-16 margin-b-20">
          <div class="text-right" style="width: 88px;padding-right: 6px">所在位置:</div>
          <div>{{organize.label || '--'}}</div>
        </div>
        <yz-input
          :rules="[0, 11]"
          v-model.trim="encode"
          :maxlength="20"
          title="工位编码"
        />
        <yz-input
          :rules="[0]"
          v-model.trim="stationName"
          :maxlength="20"
          title="工位名称"
        />
        <yz-input
          v-model.trim="remark"
          inputType="textarea"
          :maxlength="200"
          title="备注"
        />
      </div>
      <q-separator />
      <div class="dialog-footer text-center margin-t-10">
        <q-btn outline label="取消" color="primary" @click="hideDialog" class="q-mr-md"/>
        <q-btn unelevated label="确认" color="primary" type="submit" :loading="submitting"/>
      </div>
    </q-form>
  </basic-dialog>
</template>

<script>
// import SelectTree from 'src/components/select-tree'
export default {
  name: 'add-edit-station-dialog',
  data () {
    return {
      show: false,
      // 分为编辑状态和添加状态 'code-edit' or 'add'
      state: 'edit',
      encode: '', // 工位编码
      stationName: '', // 工位名称
      organize: { label: null, id: null, hash: '', level: 0 },
      remark: '', // 备注
      id: null, // 工位id
      submitting: false, // 提交状态
      info: null // 数据存储
    }
  },
  methods: {
    // 显示弹框
    showDialog (state, treeActItem, item) {
      this.initInfo(state, treeActItem, item)
      this.show = true
    },
    // 隐藏弹框
    hideDialog () {
      this.show = false
    },
    // 初始化数据
    initInfo (state, treeActItem, info) {
      this.state = state
      if (state === 'edit') {
        this.encode = info.opname
        this.stationName = info.opdesc
        this.remark = info.remark
        this.id = info.id
      } else {
        this.encode = ''
        this.stationName = ''
        this.remark = ''
        this.id = null
      }
      // this.organize = {
      //   id: treeActItem.id,
      //   label: treeActItem.label,
      //   hash: treeActItem.hash,
      //   level: treeActItem.level
      // }
      if (treeActItem === null) {
        this.organize = {
          id: '',
          label: '',
          hash: '',
          level: ''
        }
      } else {
        this.organize = JSON.parse(JSON.stringify(treeActItem))
      }
      this.info = info
    },
    // 提交
    submit () {
      const data = {
        opdesc: this.stationName,
        opname: this.encode,
        remark: this.remark,
        parentLevel: this.organize.level
      }
      if (this.state === 'edit') {
        data.id = this.id
      }
      this.submitting = true
      this.$emit('submit', this.state, data, this.organize)
    },
    setSelTree (result) {
      this.organize = result
    }
  }
}
</script>

<style scoped lang="stylus">
  >>>  .dialog-content .name {
    font-size: 16px;
    display: inline-block;
    width: 91px;
    color: #333;
    line-height: 31px;
  }
.dialog{
  .dialog-title{
    padding 12px 16px
    line-height 1
    font-size 18px
  }

}
</style>
